*{
    margin: 0;
    padding: 0;
    list-style: none;
    --primary-color: #0055f7;
    --accent-color: #ff55f7;
}

body{
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.head{
    height: 50px;
    background-color: var(--primary-color);
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.432);
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 20;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    box-sizing: border-box;
}

.title{

    padding-left: 10px;
    color: white;
    font-weight: normal;
    font-size: 18px;
    overflow:hidden;
    white-space: nowrap;
}

.flexspace{
    flex-grow: 1;
}

.menutextbox{
    background: transparent;
    background-color: transparent;
    border: none;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
    color: white;
    width: 8em;
    flex-grow: 0;
    border-bottom: solid var(--accent-color) 2px;
}

.menubtn{
    border-radius: 20px;
    width: 40px;
    height: 40px;
    color: white;
    background-color: transparent;
    border: none;
    transition-duration: 200ms;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
    flex-shrink: 0;
}

.menubtn:hover{
    transition-duration: 200ms;
    background-color: rgba(255, 255, 255, 0.349);

}

.leftmenu{
    width: 100%;
    background-color: white;
    height: 100%;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.432);
    display: flex;
    flex-direction: column;
    overflow-y:scroll;
    overflow-x: hidden;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
}
.leftmenu>*{
    flex-shrink: 0;
}
.drawer-head{
    background-image: url('img/bg_drawer_head.png');
    width: 100%;
    height: 140px;
    background-size: cover;
}

.uppermenu{
    color: gray;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
}

.line{
    height: 1px;
    background-color: gray;
}

.drawermenuitems{
    margin-bottom: 10px;
    margin-top: 10px;
}

.drawermenuitems>*{
    padding-left: 60px;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position-y: center;
    background-position-x: 16px;
}

.bookimgbg{
    background-image: url('img/ic_menu_bookmark.png');
}
.menuitem{
    height: 50px;
    width: 100%;
    background-size: 24px;
    line-height: 50px;
    flex-shrink: 0;
}


.booklist{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    display: grid;
    padding: 8px;
    position: absolute;
    top: 0px;
    left: 0px;
    box-sizing: border-box;
    justify-content: space-around;
    grid-template-columns: repeat(auto-fill, 120px);
    scroll-margin-bottom: 20px;
    align-content: start;
}

.bookitem{
    width: 120px;
    height: 200px;
    box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.432);
    background-color: white;
    border-radius: 8px;
    margin: 5px;
}

.bookitem:link{
    text-decoration: none;
}

.bookcover{
    width: 100px;
    height: 150px;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 10px;
}

.bookname{
    height: 30px;
    line-height: 15px;
    font-size: 12px;
    color: gray;
    margin-left: 10px;
    margin-right: 10px;
    overflow: hidden;
}

.container{
    width: 100vw;
    height: calc(100vh - 50px);
    position: absolute;
    top: 50px;
    left: 0px;
    z-index: 0;
}

.drawerhide{
    transform: translateX(-300px);
    transition-duration: 300ms;
}


.fadeout{
    opacity: 0%;
    transition-duration: 300ms;
}

.drawerslider{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    z-index: 200;
}

.drawerbg{
    background-color: rgba(0,0,0,0.5);
    z-index: 150;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    position: absolute;
    transition-duration: 300ms;
}

.drawerfg{
    background-color: white;
    z-index: 200;
    position: absolute;
    width: 300px;
    height: 100%;
    left: 0px;
    transition-duration: 300ms;
    top: 0px;
}


.optionmenufg{
    background-color: white;
    z-index: 200;
    position: absolute;
    width: 160px;
    right: 5px;
    transition-duration: 300ms;
    top: 5px;
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.432);
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}


.menuhide{
    transform: translateX(40%) translateY(-100%);
    transition-duration: 220ms;
}
.optionmenuitem{
    height: 40px;
    width: 100%;
    background-size: 24px;
    background-position-x: 8px;
    background-position-y: center;
    padding-left: 40px;
    font-size: 18px;
    line-height: 40px;
    box-sizing: border-box;
    transition-duration: 300ms;
    background-repeat: no-repeat;
}

.darkhover{
    transition-duration: 300ms;
}
.darkhover:hover{
    background-color: lightgray;
    transition-duration: 300ms;
}

.bookmarkoff{
    background-image: url('/common/img/ic_menu_bookmark_unlock.png');
}

.bookmarkon{
    background-image: url('/common/img/ic_menu_bookmark_lock.png');
}


.tabcontainer{
    width: 100%;
    height: 100%;
}

.tabheaders{
    width: 100%;
    height: 70px;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

.tabheader{
    height: 100%;
    flex-grow: 2;
    text-align: center;
    box-sizing: border-box;
    padding-top: 40px;
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: center 12px;
}

.tab1{
    background-image: url("/common/img/ic_menu_chapters.png");
}
.tab2{
    background-image: url("/common/img/ic_menu_bookmark.png");
}
.tabselected{
    border-bottom: solid var(--accent-color) 2px;
}

.tabpages{
    position: absolute;
    top: 70px;
    left: 0px;
    width: 100%;
    height: calc(100% - 70px);
}

.tabpage{
    overflow: scroll;
    width: 100%;
    height: 100%;
}

.tableofcontent{
    height: 40px;
    width: 100%;
    background-position-y: center;
    background-position-x: calc(100% - 4px);
    background-size: 24px;
    padding-left: 8px;
    background-repeat: no-repeat;
    overflow: hidden;
    line-height: 40px;
    font-size: 13px;
    white-space: pre;
    box-sizing: border-box;
    position: relative;
}

.btngo{
    padding: 6px;
    box-sizing: border-box;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: white;
}

.savecard{
    width: calc(100% - 20px);
    height: 100px;
    box-shadow: 0px 2px 5px 1px rgba(0, 0, 0, 0.432);
    border-radius: 8px;
    margin: 10px;
    position: relative;

}

.savetime{
    font-weight: bold;
    font-size: 12px;
    font-style: italic;
    line-height: 24px;
    height: 24px;
    width: auto;
    position: absolute;
    left: 0px;
    top: 0px;
    padding-left: 10px;
    color: white;
    padding-right: 30px;
    background-image: url("/common/img/bm_bg.png");
    background-repeat: no-repeat;
    background-size: 100%,100%;
    border-radius: 8px 0px 0px 0px;
}

.savedesc{
    top: 26px;
    position: absolute;
    left: 0px;
    width: 100%;
    height:74px;
}

.savetitle{
    line-height: 17px;
    font-size: 14px;
    box-sizing: border-box;
    width: calc(100% - 80px);
    height: 74%;
    padding-left: 10px;
    position: absolute;
    left: 0px;
    top: 0px;
    padding-top: 20px;
    white-space: pre;
    overflow: hidden;
}

.savebtns{
    height: 100%;
    position: absolute;
    left: calc(100% - 80px);;
    width: 80px;
    top: 0px;
}

.savebtn{
    color: var(--accent-color);
    text-align: center;
    line-height: 37px;
    height: 50%;
    width: 100%;
}

.progressbar{
    height: 2px;
    width: 100%;
    position: absolute;
    animation: lr;
    animation-duration: 1000ms;
    animation-iteration-count: infinite;
    margin-top: 4px;
    background-color: var(--accent-color);
}

@keyframes lr {
    0%{
        transform: translateX(-100%);
    }
    50%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(100%);
    }
}

.snackbar{
    position: absolute;
    height: 40px;
    width: 100%;
    left: 0px;
    bottom: -40px;
    box-sizing: border-box;
    line-height: 40px;
    font-size: 20px;
    padding-left: 30px;
    padding-right: 30px;
    color: white;
    z-index: 200;
    background-color: #333;
    box-shadow: 0px 0px 3px 0px gray;
}
@keyframes toast {
    0%{
        bottom: -40px;
    }
    25%{
        bottom: 0px;
    }
    75%{
        bottom: 0px;
    }
    100%{
        bottom: -40px;
    }
}
.snackbar-anim{
    animation: toast;
    animation-duration: 1000ms;
}


::-webkit-scrollbar { /* 滚动条整体样式 */
    width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 5px;
}

::-webkit-scrollbar-thumb { /* 滚动条里面小方块 */
    border-radius: 5px;
    background: #90909060;
}

::-webkit-scrollbar-track { /* 滚动条里面轨道 */
    border-radius: 5px;
    background: #60606020;
}

.auto-scroll {

}
    /* 需要滚动的地方加上这个class */
.auto-scroll ::-webkit-scrollbar { /* 组件内滚动条不显示 */
    display: none;
}

.auto-scroll:hover ::-webkit-scrollbar { /* 悬停时滚动条才显示 */
    display: block;
}


.blockloading{
    position: absolute;
    background-color: rgba(24, 24, 24, 0.336);
    z-index: 50001;
}

.blockloadingfg{
    background-color: rgba(0, 0, 0, 0.72);
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    border-radius: 25px;
}
.blockloadingwhite{
    opacity: 0;
    width: 15px;
    height: 15px;
    background-color: white;
    flex-grow: 0;
    flex-shrink: 0;
    animation-duration: 1800ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-name: blink2;
}
.progressloading{
    background-color: #0b1100;
    z-index: 10002;
}



@keyframes blink2{
    0% {
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60%{
        opacity: 0;
    }
    100%{
        opacity: 0;
    }
}


.centerscreen{
    position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}




.mainsizing{
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
}